<?php
ob_start();
session_start();
require_once __DIR__ . '/common/check_admin.php';
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>新增风格 - 后台</title>
    <link rel="stylesheet" href="css/admin.css">
</head>
<body>
    <header class="admin-header">
        <!-- 导航与style.php一致 -->
    </header>

    <div class="container">
        <h1 class="page-title">新增前端风格</h1>
        <div class="form-container">
            <form id="styleForm">
                <div class="form-group">
                    <label class="form-label" for="themeName">风格名称</label>
                    <input type="text" class="form-control" id="themeName" name="theme_name" placeholder="例如：科技蓝风格" required>
                </div>

                <div class="form-group">
                    <label class="form-label" for="primaryColor">主色调（HEX）</label>
                    <input type="text" class="form-control" id="primaryColor" name="primary_color" value="#1e40af" required>
                    <div class="form-hint">示例：#2563eb（蓝色）、#dc2626（红色）</div>
                </div>

                <div class="form-group">
                    <label class="form-label" for="secondaryColor">辅助色（HEX）</label>
                    <input type="text" class="form-control" id="secondaryColor" name="secondary_color" value="#64748b" required>
                </div>

                <div class="form-group">
                    <label class="form-label" for="fontFamily">字体家族</label>
                    <input type="text" class="form-control" id="fontFamily" name="font_family" 
                        value="Segoe UI, system-ui, -apple-system, sans-serif" required>
                    <div class="form-hint">多个字体用逗号分隔，例如："Microsoft YaHei, SimHei, sans-serif"</div>
                </div>

                <div class="form-group">
                    <label class="form-label">布局类型</label>
                    <label style="margin-right:20px;">
                        <input type="radio" name="layout_type" value="1" checked> 紧凑布局（内容密度高）
                    </label>
                    <label>
                        <input type="radio" name="layout_type" value="2"> 宽松布局（间距更大）
                    </label>
                </div>

                <div>
                    <button type="submit" class="btn btn-primary">保存风格</button>
                    <button type="button" class="btn btn-default" onclick="location.href='style.php'">取消</button>
                </div>
            </form>
        </div>
    </div>

    <script>
        document.getElementById('styleForm').addEventListener('submit', (e) => {
            e.preventDefault();
            fetch('api/style_api.php?action=add', {
                method: 'POST',
                body: new FormData(e.target)
            }).then(res => res.json()).then(data => {
                if (data.status === 'success') {
                    alert('新增成功');
                    location.href = 'style.php';
                } else {
                    alert('失败：' + data.msg);
                }
            });
        });
    </script>
</body>
</html>